<template>
  <div class="page_main">
    <scroll
      :height="tgheight"
      :pullupActive="!noMoreData"
      @pullingDown="pullDownFun"
      @pullingUp="pullupFun"
      ref="scrollTougu"
      :tiptxt="tiptext"
    >
      <ul class="tougu_list">
        <li v-for="(item, index) in touguData" @click="goDetail(item.user_id, item)" :key="index">
          <img class="tg_avatar fl" :src="item.face_image_small" width="56" height="56" />
          <div class="tg_name">{{ item.name }}</div>
          <p class="tg_fans_box">
            <span class="tg_fans">{{ item.fans_num }}</span>
            人已关注
          </p>
          <p class="tg_ability">
            能力圈:
            <template v-for="(a, i) in item.ability">
              <span :key="i">{{ a.ability_name }}</span>
            </template>
          </p>
          <button
            class="atten_btn"
            :class="{ atten_btn_yes: item.status == '0' }"
            @click.stop="addFoucs(item.status, item.user_id, index)"
          >
            {{ item.status == '0' ? '已关注' : '关注' }}
          </button>
        </li>
      </ul>
    </scroll>
  </div>
</template>

<script>
import { touguList } from '@/service/touguServer'
import { addFoucsFun } from '@/service/yewuServer'
import scroll from '@/components/scroll'
export default {
  name: 'tougu',
  data() {
    return {
      touguData: [],
      tgheight: '100%',
      pulldown: true,
      pullup: true,
      curPage: 1,
      numPerPage: 6,
      totalPages: 0,
      noMoreData: false,
      tiptext: '没有更多数据了',
    }
  },
  components: {
    scroll,
  },
  created() {
    this.tgheight = window.innerHeight - 44
  },
  mounted() {
    this.queryTouguList()
  },
  methods: {
    pageBack() {
      this.$router.go(-1)
    },
    addFoucs(status, userId, index) {
      addFoucsFun({
        user_id: userId,
        status: status == '0' ? '1' : '0',
      }).then(
        res => {
          if (res.error_no == '0') {
            this.touguData[index].status = res.results[0].status
          }
          console.log('-999-1', res)
        },
        err => {
          console.log('-999', err)
        },
      )
    },
    goDetail(userId, curTougu) {
      this.$store.commit('updateCurTougu', curTougu)
      //this.$store.state.testdata = '3'
      this.$router.push({ path: '/touguDetail/' + userId })
    },
    pullDownFun() {
      console.log('down')
      this.curPage = 1
      this.noMoreData = true
      this.queryTouguList()
    },
    pullupFun() {
      //console.log('up')
      this.curPage++
      this.queryTouguList(this.curPage)
    },
    queryTouguList() {
      touguList(
        {
          type: '1',
          curPage: this.curPage,
          numPerPage: 10,
        },
        { loading: false, encode: true, timeout: 10000, method: 'post' },
      ).then(
        res => {
          if (res.error_no == '0') {
            let _results = res.results[0]
            //this.touguData = res.results[0].data
            // test commount remove
            this.totalPages = _results.totalPages
            this.curPage = _results.currentPage
            _results.data = _results.data.map(function(item) {
              item.ability = item.ability ? JSON.parse(item.ability) : []
              return item
            })

            if (_results.currentPage === 1 && _results.data) {
              this.touguData = _results.data
            } else if (_results.currentPage > 1 && _results.data != '') {
              this.touguData = this.touguData.concat(_results.data)
            }
            if (_results.currentPage >= _results.totalPages) {
              this.noMoreData = true
            }

            this.$refs.scrollTougu.refresh()
          }
        },
        err => {
          console.log(err)
        },
      )
    },
  },
}
</script>
